<template lang="pug">
.user-index

    .user-sidebar

        .to_shop(@click="ToShopIndex") To Shop
        ul.sidebar-menu
            li( v-for="( item,index) in user_side_bar" :key="index" )
                ul.sidebar-menu-second
                    li(v-for="(citem,cindex ) in item.Children" :key="cindex" @click="changeDesIndex(cindex) " )
                        router-link(:to="{path:item.Path+citem.Path}"  )
                            span(v-show="IsAdminCheck(citem.Title)") {{citem.Title}}
    .user-content
        .user-header
            div User Info
            .page_header {{user_side_bar[0].Children[side_bar_index].Des}}
            .logout(@click="LogOut") LogOut
        .main-content
            router-view
        .user-foot
            div 2023 © EmpShop  Powered by ELIZABEVIL
            BottomBar

</template>
<script setup lang="ts">


import {onMounted, onUpdated, ref} from "vue";
import {StoreUserDetail, StoreUserInfo} from "../../store/userInfo";
import {useRouter} from "vue-router";
import BottomBar from "../utils/BottomBar.vue";
import {Temp} from "../../utils/Constant";

const router = useRouter()
const ToShopIndex = () => {
    router.replace("/index")
}
const LogOut = () => {
    localStorage.setItem(Temp.Token, "")
    router.replace("/index")
}


const user_side_bar = ref([
    {
        Title: "UserInfo", Path: "/user", Icon: "", Children: [
            {Title: "Info", Path: "", Icon: "", Des: "Your Info"},
            {Title: "Games", Path: "/games", Icon: "", Des: "Your Games"},
            {Title: "Friends", Path: "/friends", Icon: "", Des: "Your Friends"},
            {Title: "WishList", Path: "/wishlist", Icon: "", Des: "Your WishList"},
            {Title: "OrderCart", Path: "/orderCart", Icon: "", Des: "Your OrderCart"},
            {Title: "Admin", Path: "/admin", Icon: "", Des: "You Are Admin"},
        ]
    },

])
const side_bar_index = ref(0)

const changeDesIndex = (index: number) => {
    side_bar_index.value = index
}

const storeUserInfo = StoreUserInfo();
const UserInfoData = storeUserInfo.Get()
const IsAdminCheck = (title: string): boolean => {
    if (title != 'Admin') {
        return true
    }
    const admin = UserInfoData.value?.is_admin as boolean;
    return admin ? admin : false
}

onUpdated(() => {
    StoreUserDetail().Flush()
    StoreUserInfo().Flush()
})

onMounted(() => {
    StoreUserDetail().Flush()
    StoreUserInfo().Flush()
})

</script>

<style lang="sass" scoped>

@import "../../assets/sass/user/userIndex"

</style>
